<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import Portservice from "@/apis";
import type Typings from "@/typings";
import { transform } from "@/utils";
import { roleDict, genderDict } from "@/constant";
import UserDrawer from "./components/drawer.vue";
import { $confirm, $singleMsg } from "xt-public/plugins/utils/element.ts";

const drawer = ref();
const drawerController = {
  open(scope: Typings.User.scope | null, type: string = "check") {
    drawer.value.open(scope, type);
  },
};

// 搜索栏数据
const searchForm = ref<Partial<Typings.User.user>>({
  name: "",
});

// 搜索栏 formJson
const searchFormJson = computed<Typings.XtPublic.SearchBar.formJson[]>(() => {
  return [
    {
      el: "input",
      span: 8,
      prop: "name",
      label: "名称",
    },
  ];
});

// 搜索栏控制器
const searchController = {
  search() {
    tableController.getList();
  },

  reset() {
    tableController.getList();
  },
};

// 表格 columns 数据
const tableColumns = computed<
  Typings.XtPublic.Table.column<Typings.User.user>[]
>(() => {
  return [
    {
      prop: "name",
      label: "名称",
      clickFn: (scope) => {
        drawerController.open(scope, "check");
      },
    },
    {
      isHide: true,
      prop: "account",
      label: "账号",
    },
    {
      prop: "roleId",
      label: "角色",
      renderFn(scope) {
        return transform(scope.row.roleId, roleDict);
      },
    },
    {
      prop: "gender",
      label: "性别",
      width: 100,
      renderFn(scope) {
        return transform(scope.row.gender, genderDict);
      },
    },
    {
      prop: "createdTime",
      label: "创建时间",
      colType: "time",
      format: "YYYY-MM-DD HH:mm:ss",
    },
  ];
});

// 表格数据
const table = ref({
  data: [],
  loading: false,
  pagination: {
    page: 1,
    size: 10,
    total: 0,
  },
});

// 表格控制器
const tableController = {
  // 获取用户列表数据
  async getList() {
    try {
      table.value.loading = true;
      const params = {
        page: table.value.pagination.page,
        size: table.value.pagination.size,
        ...searchForm.value,
      };
      const { data } = await Portservice.userListApi(params);
      table.value.data = data.list || [];
      table.value.pagination.total = data.total || 0;
    } finally {
      table.value.loading = false;
    }
  },
  // 分页器变化
  paginationChange() {
    tableController.getList();
  },
  create() {
    drawerController.open(null, "create");
  },
  update(scope: Typings.User.scope) {
    drawerController.open(scope, "update");
  },
  async delete(scope: Typings.User.scope) {
    await $confirm({
      tip: "确定要删除该用户吗？",
    });

    await Portservice.userRemoveApi({ id: scope.row.id });

    $singleMsg({
      message: "删除成功",
    });

    tableController.getList();
  },
};

onMounted(() => {
  tableController.getList();
});
</script>

<template>
  <div class="page-container w-full h-full overflow-hidden flex flex-col">
    <div class="search-container">
      <xt-search-bar
        :data="searchForm"
        :formJson="searchFormJson"
        @search="searchController.search"
        @reset="searchController.reset"
      >
        <template #btn>
          <xt-link type="success" @click="tableController.create">新增</xt-link>
        </template>
      </xt-search-bar>
    </div>
    <div class="table-container height-0 flex-1 overflow-hidden">
      <xt-table
        height="100%"
        v-loading="table.loading"
        :data="table.data"
        :columns="tableColumns"
      >
        <template #operate>
          <xt-table-column label="操作" align="center" width="120">
            <template #default="scope">
              <xt-link class="mr-[8px]" @click="tableController.update(scope)"
                >编辑</xt-link
              >
              <xt-link type="danger" @click="tableController.delete(scope)"
                >删除</xt-link
              >
            </template>
          </xt-table-column>
        </template>
      </xt-table>
    </div>
    <div class="pagination-container mt-[10px] flex flex-row-reverse">
      <xt-pagination
        v-model:current-page="table.pagination.page"
        v-model:page-size="table.pagination.size"
        :total="table.pagination.total"
        @change="tableController.paginationChange"
      />
    </div>

    <user-drawer ref="drawer" @confirm="tableController.getList" />
  </div>
</template>
